<template>
  <div class="MultipleChoiceShuttleBox">
    <input v-model="keyWord" type="text" placeholder="支持模糊搜索" />
    <div class="shuttleBox">
      <ul
        class="selectUl"
        ref="selectUl"
        @scroll="selectUlScroll()"
        @mouseover="changeFlag(false)"
      >
        <li
          v-for="(item, index) in getData"
          :key="index"
          @click="select(item, index)"
          :class="{ active: item.active }"
          :title="item.value"
        >
          {{ item.value }}
        </li>
      </ul>
      <ul
        class="renameUl"
        ref="renameUl"
        @scroll="renameUlScroll()"
        @mouseover="changeFlag(true)"
      >
        <li
          v-for="(item, index) in getData"
          :key="index"
          :class="{ show: item.active }"
        >
          <input
            type="text"
            :value="item.newValue"
            @input="rename($event, item, index)"
          />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "MultipleChoiceShuttleBox",
  props: ["data"],
  data() {
    return {
      // 搜索关键词
      keyWord: "",
      // 鼠标在哪个滚动区域的判断
      flag: false,
    };
  },
  computed: {
    // 根据关键词过滤数据
    getData: {
      // 回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
      get() {
        if (!this.data) {
          return [];
        }
        return this.data.filter(
          (item) => item.value.indexOf(this.keyWord) > -1
        );
      },
      // 监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
      // val就是最新属性值
      set(val) {},
    },
  },
  mounted() {
    // 添加要修改的新值
    this.getData.forEach((element) => {
      element.newValue = element.value;
    });
  },
  methods: {
    // 做鼠标在哪个滚动区域的判断
    changeFlag(flag) {
      this.flag = flag;
    },
    // 左右滚动条滚动同步
    selectUlScroll() {
      if (!this.flag) {
        this.$refs.renameUl.scrollTop = this.$refs.selectUl.scrollTop;
      }
    },
    // 左右滚动条滚动同步
    renameUlScroll() {
      if (this.flag) {
        this.$refs.selectUl.scrollTop = this.$refs.renameUl.scrollTop;
      }
    },
    // 重命名
    rename($event, item) {
      // 查找对应要修改的数据
      this.getData.forEach((element) => {
        if (item.id === element.id) {
          element.newValue = $event.target.value;
        }
      });
    },
    // 选中
    select(item, index) {
      if (item.active) {
        //为item添加不存在的属性，需要使用vue提供的
        //Vue.set( object, key, value )方法。
        this.$set(item, "active", false);
      } else {
        this.$set(item, "active", true);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.MultipleChoiceShuttleBox {
  > input {
    width: 260px;
    height: 32px;
    border: 1px solid #cbcbcb;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #999999;
    line-height: 32px;
  }
  > .shuttleBox {
    display: flex;
    > ul.selectUl {
      width: 260px;
      height: 264px;
      background: #ffffff;
      border: 1px solid #cbcbcb;
      border-radius: 4px;
      overflow-y: scroll;
      > li {
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 32px;
        padding-left: 12px;
        margin-bottom: 1px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.active {
          background: #4475f6;
          color: #ffffff;
        }
      }
    }
    > ul.renameUl {
      width: 190px;
      height: 264px;
      background: #ffffff;
      overflow-y: scroll;
      margin-left: 10px;
      &::-webkit-scrollbar {
        display: none;
      }
      > li {
        width: 100%;
        margin-bottom: 1px;
        opacity: 0;
        &.show {
          opacity: 1;
        }
        > input {
          width: 100%;
          height: 32px;
          border: 1px solid #cbcbcb;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 500;
          color: #666666;
          line-height: 32px;
          padding: 0 10px;
        }
      }
    }
  }
}
</style>